<template>
  <div>
    <el-card>
      <p>订单应收款审批</p>
      <div class="searchArea flex">
        <el-form ref="serachForm"
                 :model="searchForm"
                 :inline="true"
                 style="width:98%"
                 label-position="left"
                 label-width="90px">
          <el-form-item label="订单编号"
                        prop="orderNum">
            <el-input v-model="searchForm.orderNum"
                      placeholder="请输入订单编号"></el-input>
          </el-form-item>
          <el-form-item label="订单时间"
                        prop="timeRange">
            <el-date-picker v-model="searchForm.timeRange"
                            clearable
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"></el-date-picker>
          </el-form-item>
           <el-form-item label="是否到账">
            <el-select v-model="searchForm.mValue" placeholder="请选择">
              <el-option
                v-for="item in AllSlist"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="action">
            <el-button type='primary'
                       @click="getOrderList">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type='primary'
                       @click="dialogFormVisible=true">导出</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="tableBox">
        <el-table :data="tableData"
                  style="width: 100%"
                  height="500"
                  stripe>
          <el-table-column prop="addTime"
                           label="订单时间"
                           align="center"></el-table-column>
          <el-table-column prop="orderNum"
                           label="订单号"
                           align="center"></el-table-column>
          <el-table-column prop="shopUserAccount"
                           label="购买账户"
                           align="center"></el-table-column>
          <el-table-column prop="realName"
                           label="收货人姓名"
                           align="center"></el-table-column>
          <el-table-column prop="userPhone"
                           label="收货人电话"
                           align="center"></el-table-column>
          <el-table-column prop="payType"
                           label="付款方式"
                           align="center"></el-table-column>
          <el-table-column prop="status"
                           label="订单状态"
                           align="center"></el-table-column>
          <el-table-column label="操作"
                           align="center"
                           fixed="right"
                           width="220">
            <template slot-scope="scope">
              <el-button type="success"
                         size="mini"
                         @click="sureOrder(scope.row,scope.$index)"
                         v-show="scope.row.payType == '线下' ? scope.row.status == '待付款':scope.row.payType != '线上'">到账确认</el-button>
              <el-button type="primary"
                         size="mini"
                         @click="checkDetail(scope.row,scope.$index)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="text-align:center;margin-top:20px"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="[5, 10, 15, 20]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total"></el-pagination>
      </div>
    </el-card>
      <el-dialog title="导出收款审批" :visible.sync="dialogFormVisible">
        <el-form :model="downLoadForm">
            <el-form-item label="订单编号"
                          prop="orderNum">
              <el-input v-model="downLoadForm.orderNum"
                        placeholder="请输入订单编号"></el-input>
            </el-form-item>
            <el-form-item label="是否到账">
            <el-select v-model="downLoadForm.mValue" placeholder="请选择">
              <el-option
                v-for="item in AllSlist"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
            <el-form-item label="订单时间"
                          prop="timeRange">
              <el-date-picker v-model="downLoadForm.timeRange"
                              clearable
                              type="daterange"
                              range-separator="至"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="downLoadData">确 定</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import {ORDER_MAIN_LIST,RECEIPT_DOWNLOAD,ORDER_CONFIRM_RECEIVE} from '@/utils/api';
import axios from 'axios'
import { formatDate } from '@/utils/validate.js';
export default {
  data () {
    return {
      downloadUrl:"https://yzbban.oss-cn-shanghai.aliyuncs.com/",
      downLoadForm:{
        mValue:[0,1,2,3,4,6],
        orderNum:'',
        timeRange: [new Date().getTime()-2592000000,new Date().getTime()+86400000],
      },
      //0：待付款；1：待收货；2：待发货；3：待评价；4：已完成；6 已评价
      AllSlist:[{"id":[0,1,2,3,4,6],"name":"全部"},
      {"id":[1,2,3,4,6],"name":"到账"},{"id":[0],"name":"未到账"}],
      dialogFormVisible:false,
      searchForm: {
        mValue:[0,1,2,3,4,6],
        timeRange: [new Date().getTime()-2592000000,new Date().getTime()+86400000],
        orderNum: ''
      },
      tableData: [
      ],
      currentPage: 1,
      pageSize: 10,
      total: 50
    };
  },
  mounted () {
    this.getOrderList();
  },
  methods: {
    downLoadData(){
      RECEIPT_DOWNLOAD({
        orderNum:this.downLoadForm.orderNum,
        startTime:Math.floor(new Date(this.downLoadForm.timeRange[0]).getTime()/1000),
        endTime:Math.floor(new Date(this.downLoadForm.timeRange[1]).getTime()/1000),
        statusList:this.downLoadForm.mValue.length==0?[0,1,2,3,4,6]:this.downLoadForm.mValue
      }).then(res => {
        console.log(res.data)
        var url = this.downloadUrl + res.data
        location.href = url
        this.dialogFormVisible = false
      })
    },
    formatStatus(row, column) {
      var status = row[column.property]
      switch(status) {
        case 10: return '线下'
        default: return '线上'
      }
    },
    checkDetail (row, index) {
      this.$router.push({
        path: "FinancialOrderDetail",
        query: {
          data: row,
          handler: "check"
        }
      });
    },
    sureOrder (row, index) {
      this.$confirm('应收到账确认?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        ORDER_CONFIRM_RECEIVE({
          orderId: row.id
        }).then(res=>{
          this.$message.success('到账确认成功')
          this.getOrderList();
        })
      }).catch(() => {
        this.$message.error('到账确认失败')
      });

    },
    getOrderList () {
      //退换货
       ORDER_MAIN_LIST({ 
          //0：待付款；1：待收货；2：待发货；3：待评价；4：已完成；6 已评价 
          orderNum:this.searchForm.orderNum,
          statusList:this.searchForm.mValue.length==0?[0,1,2,3,4,6]:this.searchForm.mValue,
          startTime:Math.floor(new Date(this.searchForm.timeRange[0]).getTime()/1000),
          endTime:Math.floor(new Date(this.searchForm.timeRange[1]).getTime()/1000),
          pageNo: this.currentPage,
          pageSize: this.pageSize
      }).then(res => {
          console.log(res.data.dataList)
          this.tableData = res.data.dataList
          this.total = res.data.count
          for (let i in this.tableData) {
            this.tableData[i].addTime = this.formatSecond(this.tableData[i].addTime)
            if(this.tableData[i].payType==10){
              this.tableData[i].payType = "线下"
            }else{
              this.tableData[i].payType = "线上"
            }
            //0：待付款；1：待收货；2：待发货；3：待评价；4：已完成；6 已评价 
            //状态
            switch(this.tableData[i].status){
              case 0:
                this.tableData[i].status = "待付款"
                break
              case 1:
                this.tableData[i].status = "待收货"
                break;
              case 2:
                this.tableData[i].status = "待发货"
                break;
              case 3:
                this.tableData[i].status = "待评价"
                break;
              case 6:
                this.tableData[i].status = "已评价"
                break;
              case -1:
                this.tableData[i].status = "退换货订单"
                break;
              case 4:
                this.tableData[i].status = "已完成"
                break;
            }
          }
      })
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val
      this.getOrderList()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
      this.getOrderList()
    },
    //时间格式化  
    formatSecond (second) {
      if (!second) return "";
      return formatDate(new Date(second * 1000), "yyyy-MM-dd hh:mm:ss");
    },
  }
};
</script>

<style lang="scss" scoped>
p {
  font-size: 20px;
  padding: 10px 0;
}
.searchArea {
  width: 100%;
  padding: 15px 0;
  margin-top: 15px;
  justify-content: center;
  padding-bottom: 0;
}
.tableBox {
  width: 100%;
  background: #fff;
  margin-top: 15px;
  padding: 10px 2px;
  border-radius: 5px;
  // box-shadow: 2px 3px 15px 0 #ccc;
}
</style>
<style>
.el-date-editor .el-range-separator {
  padding: 0 !important;
}
</style>